<!-- 版本：
    "el-select-tree": "^2.1.1-beta.12",
    "element-ui": "^2.15.14",
 -->
<template>
    <ld-dialog :appendToBody="true" ref="dialog" title="授权用户" width="456" @close="handleClose">
        <div>
            <el-form :model="form" ref="form" label-width="110px" :rules="rules" style="width: 80%; margin: 0px auto">
                <el-form-item label="授权用户" prop="ownerUserId">
                    <el-select-tree lazy :props="treeProps" :value-key="'id'" :node-key="'id'" :load="handleLoad"
                        :check-strictly="false" :cache-data="cacheData" @node-click="handleNodeClick" style="width: 100%"
                        v-model="form.ownerUserId" />
                </el-form-item>
            </el-form>
            <div class="footer">
                <el-button type="primary" :loading="loading" @click="handleSave" class="footer-btn">保 存</el-button>
            </div>
        </div>
    </ld-dialog>
</template>
<script>
import { uid } from "uid";
import LdDialog from "@/components/LdDialog/index.vue";
export default {
    name: 'BurnDialog',
    components: {
        LdDialog
    },
    props: {
        currentClickNode: {
            type: Object,
            default: () => ({})
        },
    },
    data() {
        return {
            form: {
                ownerUserId: null,
            },
            rules: {
                ownerUserId: [{ required: true, message: "请选择授权用户", trigger: 'change' }]
            },
            loading: false,
            treeProps: {
                label: "caption",
                children: "children",
                value: 'id'
            },
            cacheData: [],
            resolve: null,
            checkNodeData: null,
        }
    },
    mounted() {
        this.$bus.$on('getUserTreeFinished', this.getUserTreeFinished)
        if (this.currentClickNode?.approverId) {
            const { approverId, approver } = this.currentClickNode
            const selectTree = [
                { id: approverId, caption: approver },
            ]
            this.cacheData = selectTree;
            this.checkNodeData = {
                caption: approver,
                id: approverId
            }
            this.$nextTick(() => {
                this.form.ownerUserId = approverId;
            });
        }
    },
    beforeDestroy() {
        this.$bus.$off('getUserTreeFinished', this.getUserTreeFinished)
    },
    methods: {
        handleNodeClick(data, node) {
            if (data.type === 'user') {
                this.checkNodeData = {
                    caption: data.caption,
                    id: data.id
                }
            }
        },
        handleLoad(node, resolve) {
            if (node.data && node.data.isLeaf) return resolve([]);
            node.level === 0 ? this.lazyLoad(node, resolve) : this.lazyLoad(node, resolve);
        },
        lazyLoad(node, resolve) {
            this.resolve = resolve;
            const params = {
                id: node.level === 0 ? "" : node.data.id,
            };
            window.chromePro.getUserTree(JSON.stringify(params));
        },
        getUserTreeFinished(res) {
            console.log(res, "树接口");
            if (res.code === 200) {
                this.resolve(
                    res.data.map((item) => {
                        return {
                            ...item,
                            isLeaf: !item.hasChild,
                            disabled:item.hasChild
                            // leaf:!item.hasChild
                        };
                    })
                );
            }
        },
        handleClose() {
            this.$emit('close')
        },
        handleSave() {
            console.log(this.form, 'this.form')
            this.$refs.form.validate(valid => {
                if (!valid) return
                this.$emit('updateNode', { ...this.currentClickNode, ...this.checkNodeData })
                this.$emit('close')
            })
        },
    }
}
</script>
<style lang="scss" scoped>
.file-box {
    display: inline-block;
    width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.footer {
    display: flex;
    justify-content: center;
    margin-top: 8px;

    .el-button {
        width: 104px;
        height: 36px;
        border: none;
        background: linear-gradient(109.97deg, #0782fb 4.3%, #41b1eb 100%);
        border-radius: 2px;
        font-family: PingFangSC-Regular;
        color: #ffffff;
        font-size: 14px;
        text-align: center;
    }
}

.template {
    font-family: PingFangSC-Regular;
    color: #0782fb;
    font-size: 12px;
}

.el-button-text {
    font-family: PingFangSC-Regular;
    color: #0782fb;
    font-size: 14px;
}
</style>